<template>
	<view class="billdetails" id="billdetails">
		<view class="billdetails_top">
			<view class="name">
				<span v-if="userObj.book_subject !== 0" style="font-weight: 700;cursor: pointer">
					<span>
						{{
				        userObj.book_subject == 1  ? "物业费"
				      : userObj.book_subject == 2  ? "维修费"
				      : userObj.book_subject == 3  ? "公共收益"
				      : userObj.book_subject == 4  ? "代扣代缴"
				      : userObj.book_subject == 5  ? "押金"
				      : userObj.book_subject == 6  ? "工资"
				      : userObj.book_subject == 7  ? "社保"
				      : userObj.book_subject == 8  ? "个税"
				      : userObj.book_subject == 9  ? "采购"
				      : userObj.book_subject == 10 ? "设备维保费"
				      : userObj.book_subject == 11 ? "设备维修费"
				      : userObj.book_subject == 12 ? "工程材料费"
				      : userObj.book_subject == 13 ? "其他"
				      : userObj.book_subject == 20 ? "社保"
				      : userObj.book_subject == 21 ? "公积金"
				      : userObj.book_subject == 22 ? "个税"
				      : userObj.book_subject == 23 ? "退款"
				      : userObj.book_subject == 24 ? "物业费未达标开通费"
				      : ""
				      }}
					</span>
					<span v-if="userObj.book_subject_child">
						{{
				        userObj.book_subject_child == 1  ? "/车位费"
				      : userObj.book_subject_child == 2  ? "/其他公共收益"
				      : userObj.book_subject_child == 3  ? "/水费"
				      : userObj.book_subject_child == 4  ? "/电费"
				      : userObj.book_subject_child == 5  ? "/暖气费"
				      : userObj.book_subject_child == 6  ? "/燃气费"
				      : userObj.book_subject_child == 7  ? "/装修押金"
				      : userObj.book_subject_child == 8  ? "/车位押金"
				      : userObj.book_subject_child == 9  ? "/公共收益押金"
				      : userObj.book_subject_child == 10 ? "/外包押金"
				      : ""
				      }}
					</span>
				</span>
			</view>
			<view class="moeny" style="color: orange;margin-left: 20rpx;">{{Number(userObj.book_money).toFixed(2)}}
				<span style="color: #000;margin-left: 5px;font-size: 16px;">元</span></view>
			<!-- <view class="last">33</view> -->
		</view>
		<!-- 分割线 -->
		<view class="xian ">
			<view class="xian_left"></view>
			<view class="xian_center"></view>
			<view class="xian_right"></view>
		</view>
		<!-- 主体内容 -->
		<view class="main">
			<view class="main_jh">
				<view class="zdbh clearfix">
					<view class="bh" style="color:#999">账单编号</view>
					<view class="num">{{userObj.book_code}}</view>
				</view>
			</view>
			<view class="main_jh">
				<view class="zdbh clearfix">
					<view class="bh" style="color:#999">缴费时间</view>
					<view class="num">{{userObj.book_create_time}}</view>
				</view>
			</view>
			<view class="main_jh">
				<view class="zdbh clearfix">
					<view class="bh" style="color:#999">缴费楼宇</view>
					<view class="num">{{userObj.book_room_id}}</view>
				</view>
			</view>
			<view class="main_jh">
				<view class="zdbh clearfix">
					<view class="bh" style="color:#999">缴费类型</view>
					<view class="num" v-if='!userObj.book_channel_of_disbursement'>线下支付</view>
					<view class="num" v-if='userObj.book_channel_of_disbursement==1'>小程序支付</view>
					<view class="num" v-if='userObj.book_channel_of_disbursement==2'>h5支付</view>
					<view class="num" v-if='userObj.book_channel_of_disbursement==3'>App支付</view>
				</view>
			</view>
			<view class="main_jh">
				<view class="zdbh clearfix">
					<view class="bh" style="color:#999">缴费方式</view>
					<view class="num" v-if="userObj.book_pay_type==1">微信</view>
					<view class="num" v-if="userObj.book_pay_type==2">支付宝</view>
					<view class="num" v-if="userObj.book_pay_type==3">现金</view>
					<view class="num" v-if="userObj.book_pay_type==4">银行卡</view>
					<view class="num" v-if="userObj.book_pay_type==5">支票</view>
					<view class="num" v-if="userObj.book_pay_type==6">银行对私账户</view>
					<view class="num" v-if="userObj.book_pay_type==7">银行对公账户</view>
				</view>
			</view>
			<view v-if="userObj.payCdo">
				<view @click="arrowUp=!arrowUp" class="flex align-center justify-center mb-2">
					<view class="mr-2">费用详情</view>
					<u-icon v-if="!arrowUp" name="arrow-down"></u-icon>
					<u-icon v-if="arrowUp" name="arrow-up"></u-icon>
				</view>
				<view class="pl-4 pr-4 pt-2 pb-2 rounded-1" v-if="arrowUp" style="background: #f4f4f4;">
					<view v-for="(item,index) in userObj.payCdo.printList" :class="index==userObj.payCdo.printList.length-1?'':'border-bottom'">
						<view class="flexClsNowrapSpcBtw pb-2 mt-2">
							<view>名称：</view>
							<view>{{item.costName}}</view>
						</view>
						<view class="flexClsNowrapSpcBtw  pb-2">
							<view>周期：</view>
							<view>{{item.cost_child_log_begin_time}}</view>
						</view>
						<view class="flexClsNowrapSpcBtw  pb-2">
							<view>金额：</view>
							<view>{{item.cost_child_log_weiyue_money}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="border-top mb-5"></view>
			<view class="main_jh " v-if="userObj.payCdo">
				<view class="zdbh clearfix">
					<view class="bh" style="color:#999">收款单位</view>
					<view class="num">{{userObj.payCdo.orgFullName}}</view>
				</view>
			</view>
			<view class="main_jh">
				<view class="zdbh clearfix">
					<view class="bh" style="color:#999">收款项目</view>
					<view class="num">{{userObj.pro_name}}</view>
				</view>
			</view>
			<view class="main_jh" v-if="userObj.book_record_user_name">
				<view class="zdbh clearfix">
					<view class="bh" style="color:#999">收款人</view>
					<view class="num">{{userObj.book_record_user_name}}</view>
				</view>
			</view>




		</view>
		<view style="color:#999" class="pr-4 pl-4">
			说明：请在缴费后60日内申请开票，如有疑问请联系管理中心。
		</view>
		<view class="bill-deta-btn mt-4" v-if="userObj.invoice != false">
			<button class="yilingqu" @click="navTo('/pages/billdetails/applyInvoice',userObj)">申请开票</button>
		</view>
		<view class="bill-deta-btn mt-4" v-if="userObj.invoice == false">
			<button class="yilingqu">已开票</button>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				allmoney: '3600.00',
				type: '已支付',
				num: 'WY20200807',
				billList: {},
				homelist: '',
				name: '',
				address: '',
				money: '',
				chooseList: [],

				//支付宝支付
				title: 'request-payment',
				loading: false,
				price: 1,
				providerList: [],
				userObj: {},
				arrowUp: false,
			}
		},
		onLoad(options) {
			const item = JSON.parse(decodeURIComponent(options.item))
			this.userObj = item
			console.log(this.userObj)
		},
		onShow() {

		},
		methods: {
			// //是否跳转开发票页面
			navTo(url) {
				let items = encodeURIComponent(JSON.stringify(this.userObj))
				uni.navigateTo({
					url: url + '?item=' + items
				});

			},
			getValShort(val) {
				var str = val;
				if (val.length > 13) {
					str = val.substring(0, 13) + '...';
				}
				return str;
			},



		}
	}
</script>

<style scoped lang="scss" scoped>
	#billdetails {
		.billdetails {
			padding: 0 30rpx;
		}

		.billdetails_top {

			text-align: center;
			background-color: #fff;
			border-top-left-radius: 6px;
			border-top-right-radius: 6px;

			.name {
				padding-top: 60rpx;
				box-sizing: border-box;
				font-size: 36rpx;
				font-weight: 550;

			}

			.last {
				margin-top: 20rpx;
				color: rgb(128, 229, 255);
			}

			.moeny {
				font-size: 48rpx;
				color: #000;
				font-weight: bold;
				margin-top: 10rpx;
			}
		}

		.xian {
			height: 50rpx;
			background-color: #fff;
			display: flex;
			justify-content: space-between;

			.xian_center {
				height: 1px;
				border-top: 1px dashed #ccc;
				margin: 25rpx 40rpx;
				width: 600rpx;

			}

			.xian_left {
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
				float: left;
				background-color: rgb(244, 244, 244);
				margin-left: -7vw;
			}

			.xian_right {
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
				float: right;
				background-color: rgb(244, 244, 244);
				margin-right: -7vw;

			}
		}

		.zdbh {
			margin-bottom: 30rpx;

			.bh {
				float: left;
			}

			.num {
				float: right;
			}
		}

		.wyf {
			.wyfname {
				float: left;
			}

			.wyfmoney {
				float: right;
			}

			.view {
				margin-bottom: 30rpx;
			}
		}

		.main_jh {
			margin-bottom: 60rpx;
		}

		.main {
			background-color: #fff;
			padding: 60rpx 42rpx;
		}

		.bill-deta-btn {
			width: 100%;

			.pay {
				background: #ff9900 !important;
				color: #fff;
			}

			.yilingqu {
				width: 80%;
				height: 84rpx;
				// background:#F9A832;
				// background-color: #F9A832;
				background: linear-gradient(180deg, #76D904 0%, #417505 100%);
				border-radius: 44rpx;
				line-height: 84rpx;
				color: #FFFFFF;
				text-align: center;
				font-size: 32rpx;
			}
		}

		.alipay {
			margin-top: 50rpx;
		}
	}
</style>